// 导入类型、接口、模块、组件、样式

import { postSendSmsApi, postSmsLoginApi } from "../../services/sms";

import { FC, useState } from "react";

import styled from "./styled.module.scss";
import { useNavigate } from "react-router-dom";

interface Props {}
const Index: FC<Props> = () => {
  const navgate = useNavigate();

  const [formData] = useState<
    SMS.PostSendSmsPayloadType | SMS.PostSmsLoginPayloadType
  >({
    // mobile: "15021459079",
    mobile: "15715312512",
    type: "login",
    code: "5945",
  });

  const onSubmit = async () => {
    const { data, msg, state } = await postSmsLoginApi(formData);
    // console.log(data);
    if (state === 200) {
      // 提示、存储、跳转
      alert(msg);
      localStorage.setItem("userinfo", JSON.stringify(data));
      navgate("/");
    } else {
      alert(msg);
    }
  };

  const onSendSms = async () => {
    // const data = await postSendSmsApi(formData);
    const { state, msg } = await postSendSmsApi(formData);
    // console.log(data);
    if (state === 201) {
      // 创建 201   但是实战200
      alert(msg);
    } else {
      alert(msg);
    }
  };

  return (
    <div className={styled.login}>
      <img
        className={styled.logo}
        src={require("../../assets/logo1.jpg")}
        alt="logo"
      />
      <input type="text" placeholder="手机号" />
      <input type="text" placeholder="验证码" />
      <button onClick={onSubmit}>登录</button>
      <div>收不到验证码</div>

      <button onClick={onSendSms}>获取验证码</button>
    </div>
  );
};

export default Index;
